<?php echo $this->Html->script('jquery.dataTables.js'); ?>
 

<script type="text/javascript">
    $(document).ready(function() {
        $('#browserList').dataTable({
            "bProcessing": true,
            "bServerSide": true,
            "sAjaxSource": "<?php echo $this->Html->Url('/Sales/laybydata'); ?>"
        });
    });
</script>
<div id="TB_load"><?php echo $this->Html->image("loading_animation.gif")?></div>
<div class="sale_item">

<div id=breadcrumbAdmin>
    <?php $this->Html->addCrumb('Laybys', '/Laybys/index', array('style'=> ('text-decoration:underline; color:#EB1E70;'))); ?>
    <?php echo $this->Html->getCrumbs(' > ', array( 'text' => 'Transactions', 'url' => array('controller' => 'Sales', 'action' => 'index', 'plugin' => null), 'escape' => false)); ?>
</div>



<h2 style="padding:0.5%;" ><?php echo __('Laybys'); ?></h2>
 
 <table id="browserList" style="width:120%;" cellpadding="0" cellspacing="0" class="items">
    <thead>
        <tr>
           <th>Layby ID</th>
				<th>Customer</th>
				<th>NO of item</th>
				<th>Amount</th>
				<th>Amount due</th>
				<th>Status</th>
				<th>Make payment</th>
				<th>Receipt</th>
				<th>More information</th>    
        </tr>
    </thead>
    <tbody>
        <tr>
            <td colspan="4" class="dataTables_empty">Loading data from server...</td>
        </tr>
    </tbody>
</table>

<!--<table class="items">
		<thead>
			<tr>
				<th>Layby ID</th>
				<th>Customer</th>
				<th>NO of item</th>
				<th>Amount</th>
				<th>Amount due</th>
				<th>Status</th>
				<th>Make payment</th>
				<th>Receipt</th>
				<th>More information</th>
			</tr> 
		</thead>
		<tbody>
			<?php //if(!empty($laybys)){?>
			<?php //foreach($laybys as $layby){?>
			<tr id="layby_id_<?php //echo $layby["Layby"]["id"]?>">
				<td><?php //echo $layby["Layby"]["id"]?></td>
				<td><?php // echo !empty($layby["Layby"]["customer_id"])?$layby["Customer"]["first_name"]." ".$layby["Customer"]["last_name"]:"No Customer"?></td>
				<td><?php //echo $layby["Layby"]["item_count"]?></td>
				<td><?php //echo $this->Number->currency($layby["Layby"]["amount"],"USD")?></td>
				<td><?php //echo $this->Number->currency($layby["Layby"]["amountdue"],"USD")?></td>
				<td><?php // echo !empty($layby["Layby"]["amountdue"])?"Active":"Done"?></td>
				<td>
				<a class="btn layby_pay <?php //echo !empty($layby["Layby"]["amountdue"])?"":"btn-disable"?>" href="javascript:;" data-id="<?php //echo $layby["Layby"]["id"]?>">Pay</a>
				</td>


				<td>
                    <a class="btn layby_receipt" href="javascript:;" data-id="<?php //echo $layby["Layby"]["sale_id"]?>">View receipt</a>
                </td>

				<td>
				    <a class="btn layby_detail" href="javascript:;" data-id="<?php //echo $layby["Layby"]["id"]?>" data-balance="">View more</a>
				</td>
			</tr>
			<?php //}}else{?>
			<tr>
				<td colspan="8">
					No Layby
				</td>
			</tr>
			<?php //}?>
		</tbody>
	</table>-->
	<!--<div class="paging">-->
        <?php
     /*   echo $this->Paginator->counter(array(
        'format' => __('Page {:page} of {:pages}, showing {:current} records out of {:count} total, starting on record {:start}, ending on {:end}')
        ));*/
        ?>
	<?php
	/*	echo $this->Paginator->prev('< ' . __('previous'), array(), null, array('class' => 'prev disabled'));
		echo $this->Paginator->numbers(array('separator' => ''));
		echo $this->Paginator->next(__('next') . ' >', array(), null, array('class' => 'next disabled'));*/
	?>
	<!--</div>-->
</div>
<div id="item_refund_dialog" title="Layby"><?php $form_id="layby_form_id";?>
	<form action="<?php echo $webroot?>Sales/paylayby" id="<?php echo $form_id?>" method="post">
		<input id="layby_form_id" name="id" type="hidden">
		<table id="make_payment_table">
					<tbody><tr id="mpt_top">
						<td id="add_payment_text">
							Add Payment:
						</td>
						<td>
							<select name="payment_type" id="payment_types">
							<?php foreach ($payment_types as $pay_t){?>
							<option value="<?php echo $pay_t["PaymentType"]["id"]?>" <?php echo !empty($sale["payment_type"])&&$sale["payment_type"]==$pay_t["PaymentType"]["id"]?"selected":""?>><?php echo $pay_t["PaymentType"]["name"]?></option>
							<?php }?>
							</select>									
						</td>
					</tr>
					<tr id="mpt_bottom">
						<td id="tender" colspan="2">
							<input type="text" name="amount" required value="" id="amount_tendered" size="10" accesskey="p" data-fid="<?php echo $form_id?>">									
						</td>
					</tr>
				</tbody>
		</table>
	</form>
</div>
<div id="item_viewmore" title="View more">
		<div id="item_viewmore_li"></div>
</div>
<?php echo $this->Html->css('/css/ui-lightness/jquery'); ?>
<?php echo $this->Html->script('jquery-ui'); ?>
<?php echo $this->Html->script('jquery.form.min'); ?>
<script type="text/javascript">
	$(document).ready(function(){

	//when clicking for the receipt button
    		$(".layby_receipt").click(function(){
    			to("<?php echo $webroot?>Sales/receipt2/"+$(this).data("id"));
    		});


		$(".layby_detail").click(function(){
			var layby_id=$(this).data("id");
			var layby_add=$(this).data("add");
			$(".layby_list_view").hide();
			if(!layby_add){
				$.get("<?php echo $webroot?>Sales/viewlayby/"+layby_id,function(data){
					$("#layby_id_"+layby_id).after(data).next().show(500);
				});
				$(this).data("add",true);
			}else{
				$("#layby_view_"+layby_id).show(500);
			}
		});
		$("#item_refund_dialog").dialog({
			autoOpen: false,
			resizable:false,
			dialogClass:"item-refund-dialog",
			width:650,
			modal:true,
			buttons:{
				"Finish":function(){
					$('#<?php echo $form_id?>').ajaxSubmit({beforeSubmit: salesBeforeSubmit, success: salesSuccess});
					$(this).dialog("close");
				},"Cancel":function(){
					$(this).dialog("close");
				}
			}
		});
		
		$("#item_viewmore").dialog({
			autoOpen: false,
			resizable:false,
			dialogClass:"item-viewmore-dialog",
			width:650,
			modal:true,
			buttons:{
				"Cancel":function(){
					$(this).dialog("close");
				}}
		});
		
		//pay button
		$(".layby_pay").click(function(){
			$("#layby_form_id").val($(this).data("id"));
			$( "#item_refund_dialog" ).dialog( "open" );
		});
	});
	function salesBeforeSubmit(formData, jqForm, options)
	{
	}
	function to(url) {
		window.location.href = url;
	}
	function salesSuccess(responseText, statusText, xhr, $form)
	{
		if(responseText){
			alert("Payment successfull");
			to("<?php echo $webroot?>Sales/layby");
		}
	}
	
	function laybypay(id)
	{	
			$("#layby_form_id").val(id);
			$( "#item_refund_dialog" ).dialog( "open" );		
	}
	
	function laybymore(layby_id)
	{		
		$("#layby_form_id").val(layby_id);
		$( "#item_viewmore" ).dialog( "open" );	
		$("#item_viewmore_li").empty();
	
		$.get("<?php echo $webroot?>Sales/viewlayby/"+layby_id,function(data){
			$("#item_viewmore_li").append(data);
    	    $(".layby_list_view").show();
				});
	
	}
</script>